<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
   <el-table-column
      prop="orderInfoId"
      label="订单号"
      width="220">
        <template slot-scope="scope">
        <span style="font-size:5px;">{{scope.row.orderInfoId}}</span>
      </template>
    </el-table-column>
      <el-table-column
      prop=""
      label="商品信息"
      width="180">
      <template slot-scope="scope">
        <img :src="scope.row.smallImage" width="50" height="50" alt="">
        <span style="font-size:10px;">{{scope.row.name}}</span>

      </template>
    </el-table-column>
    <el-table-column
      prop=""
      label="购买数量"
      width="180">
      <template slot-scope="scope">
       
        数量：<span style="font-size:10px;">{{scope.row.num}}</span>
        
      </template>
    </el-table-column>
    <el-table-column
      prop="orderInfoTimeStr"
      label="下单日期"
      width="180">
      <template slot-scope="scope">
        <span style="font-size:10px;">{{scope.row.orderInfoTimeStr}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="price"
      label="订单总金额">
      <template slot-scope="scope">
        <span style="font-size:10px;color:red;font-weight:900">￥{{scope.row.orderInfoSalePrice}}</span>
      </template>
    </el-table-column>
<el-table-column label="状态">
      <template slot-scope="scope">

            <el-button type="primary" @click="shipments(scope.row)" v-if="scope.row.orderInfoState==20" style="font-size:10px;" >已支付（点击发货）</el-button>
            <span v-if="scope.row.orderInfoState==10">已下单，未支付</span>
             <span v-if="scope.row.orderInfoState==30">已发货，待收货</span>
             <span v-if="scope.row.orderInfoState==40">已收货，等待评价</span>
            <span v-if="scope.row.orderInfoState==50">订单已取消</span>
           
        
      </template>
    </el-table-column>
  </el-table>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
      mounted(){
          this.display();
      },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
         display() {
      this.axios
        .get("https://localhost:44354/api/app/show/show-order?Type="+-1)
        .then((Response) => {
          console.log(Response.data);
          this.tableData = Response.data;
        });
    },
    //点击发货
    shipments(row){
        alert(row.orderInfoId)
        this.formdata.orderInfoState=30;
         this.axios
         .post("https://localhost:44354/发货?guid="+row.orderInfoId)
         .then(s=>{
           if(s.data>0)
           {
             alert("发货成功")
             this.display();

           }
           else
           {
             alert("发货失败")
             this.display();
           }
         })
    }

    },
    
    data() {
      return {

         tableData: [],
      formdata:{
        orderInfoState:0,
      }
      }
    }
  }
</script>